<template>
	<view class="mine">
		<view class="mine-top">
			<image :src="bj" class="top-img"></image>
			<view class="myinfo">
				<view class="info" v-if="store.userInfo">
					<image class="avatar" :src="store.userInfo?.avatarUrl"></image>
					<view class="name"> {{store.userInfo.nickName }}</view>
				</view>
				<view v-else>
					<view class="nologin bounce" @click="phoneRef?.autoLoginMore()">授权登录</view>
				</view>

			</view>
		</view>
		<view class="mine-list">
			<van-cell-group>
				<block v-if="store.userInfo">
					<van-cell icon="envelop-o" title="我的Offer" value="3" is-link />
					<van-cell icon="label-o" title="我的面试记录" value="3" is-link />
					<van-cell icon="friends-o" title="我的邀约" value="3" is-link />
					<van-cell icon="like-o" title="我的点赞" value="3" is-link />
					<van-cell icon="star-o" title="我的收藏" value="3" is-link />
					<van-cell icon="comment-o" title="我的评论" value="3" is-link />
					<van-cell icon="gem-o" title="我的积分" value="3" is-link />
				</block>

				<van-cell icon="smile-o" title="意见反馈" is-link></van-cell>
				<van-cell icon="service-o" title="隐私政策" is-link></van-cell>
				<van-cell icon="volume-o" title="通知与提醒" is-link></van-cell>
				<van-cell icon="underway-o" title="清除缓存" @click="changeShow" is-link :value="cache + 'M'"></van-cell>
				<van-cell icon="exchange" title="设置" is-link></van-cell>

			</van-cell-group>

			<view class="logout" v-if="store.userInfo">
				<van-button block @click='deles'>注销登录</van-button>
			</view>

		</view>
	</view>
	<van-overlay :show="show" @click="onClickHide">
		<view class="zhezhao">
			<van-circle :value="values" :text="values + '%'" />
		</view>
	</van-overlay>
	<!-- 气死我了 -->
	<minePhone ref="phoneRef"></minePhone>
</template>

<script setup lang='ts'>
	import minePhone from '@/component/minePhone.vue'
	import bj from '@/static/mine.gif'
	import {
		useDataStore
	} from '@/store/data.ts'
	import {
		onMounted,
		ref
	} from 'vue'
	// pinia
	const store = useDataStore();
	//定时器
	let time = null;
	//遮罩层
	const show = ref(false);
	// 进度条数据
	const values = ref(0)
	// 点击清除缓存
	const changeShow = () => {
		if (cache.value == 0) {
			wx.showToast({
				title: "缓存已经清除"
			})
			return
		}
		show.value = true;
		time = setInterval(() => {
			if (values.value < 100) {
				values.value++;
			} else {
				clearInterval(time)
				time = null
				values.value = 0;
				show.value = false;
				cache.value = 0
				wx.showToast({title:"缓存清除完成"})
			}
		}, 50)

	}
	// 点击遮罩层
	const onClickHide = () => {
		show.value = false
	}
	//缓存大小
	const cache = ref < any > (Math.ceil(Math.random() * 1000))
	const deles = () => {
		uni.setStorageSync('code', '')
		uni.setStorageSync('userInfo', '')
		store.changeUserInfo(null)
	}
	// // 授权登录
	// const autoLoginMore = () => {
	// 	// 小程序的登录流程
	// 	// 0. 获取用户的微信信息 
	// 	uni.getUserProfile({
	// 		desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
	// 		success: (res) => {
	// 			console.log(res)
	// 			// 1. 获取得到 code 
	// 			uni.login({
	// 				success: ({
	// 					code
	// 				}) => {
	// 					console.log(code) //token
	// 					uni.setStorageSync('code', code);
	// 					uni.setStorageSync("userInfo", res.userInfo)
	// 					store.changeUserInfo(res.userInfo)
	// 				}
	// 			})
	// 		}
	// 	})

	// }
	const phoneRef = ref(null)

	onMounted(() => {
		if (uni.getStorageSync('userInfo')) {
			store.changeUserInfo(uni.getStorageSync('userInfo'))
		}
	})
</script>

<style lang="scss">
	.mine {
		width: 100%;
		height: 100%;

		.mine-top {
			position: relative;

			.top-img {
				width: 100%;
				height: 700rpx;
			}

			.myinfo {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 700rpx;

				.avatar {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}

				.name {
					margin-top: 30rpx;
					font-size: 40rpx;
					color: #fff;
					text-align: center;

				}

				.nologin {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					background: #f50;
					color: #fff;
					text-align: center;
					line-height: 200rpx;
				}
			}
		}

		.formbox {
			padding: 100rpx 30rpx 30rpx 30rpx;

			.lgbtn {
				margin: 30rpx;
				border-radius: 100rpx;
			}
		}

		.mine-list {
			background: #fff;
			padding: 10rpx;

			.logout {
				margin: 24rpx;
			}
		}

		.probox {
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 60rpx;

			.promain {
				width: 100%;
				padding: 30rpx;
			}
		}
	}

	.zhezhao {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		color: #ee0a24;
	}
</style>